<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Pannonia - premium responsive admin template by Eugene Kopyov</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 9]><link href="css/ie9.css" rel="stylesheet" type="text/css"/><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>

<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.bootbox.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timepicker.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/forms/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autosize.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputmask.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.select2.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.listbox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validation.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="js/files/bootstrap.min.js"></script>

<script type="text/javascript" src="js/files/functions.js"></script>

</head>

<body>

	<!-- Fixed top -->
	<div id="top">
		<div class="fixed">
			<a href="index.html" title="" class="logo"><img src="img/logo.png" alt="" /></a>
			<ul class="top-menu">
				<li><a class="fullview"></a></li>
				<li><a class="showmenu"></a></li>
				<li><a href="#" title="" class="messages"><i class="new-message"></i></a></li>
				<li class="dropdown">
					<a class="user-menu" data-toggle="dropdown"><img src="img/userpic.png" alt="" /><span>Howdy, Eugene! <b class="caret"></b></span></a>
					<ul class="dropdown-menu">
						<li><a href="#" title=""><i class="icon-user"></i>Profile</a></li>
						<li><a href="#" title=""><i class="icon-inbox"></i>Messages<span class="badge badge-info">9</span></a></li>
						<li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
						<li><a href="#" title=""><i class="icon-remove"></i>Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /fixed top -->


	<!-- Content container -->
	<div id="container">

		<!-- Sidebar -->
		<div id="sidebar">

			<div class="sidebar-tabs">
		        <ul class="tabs-nav three-items">
		            <li><a href="#general" title=""><i class="icon-reorder"></i></a></li>
		            <li><a href="#stuff" title=""><i class="icon-beaker"></i></a></li>
		            <li><a href="#new" title=""><i class="icon-cogs"></i></a></li>
		        </ul>

		        <div id="general">

			        <!-- Sidebar user -->
			        <div class="sidebar-user widget">
						<div class="navbar"><div class="navbar-inner"><h6>Wazzup, Eugene!</h6></div></div>
			            <a href="#" title="" class="user"><img src="http://placehold.it/210x110" alt="" /></a>
			            <ul class="user-links">
			            	<li><a href="" title="">New users<strong>+12</strong></a></li>
			            	<li><a href="" title="">New orders<strong>+156</strong></a></li>
			            	<li><a href="" title="">New messages<strong>+45</strong></a></li>
			            </ul>
			        </div>
			        <!-- /sidebar user -->


			        <!-- General stats -->
			        <div class="general-stats widget">
				        <ul class="head">
				        	<li><span>Users</span></li>
				        	<li><span>Orders</span></li>
				        	<li><span>Visits</span></li>
				        </ul>
				        <ul class="body">
				        	<li><strong>116k+</strong></li>
				        	<li><strong>1290</strong></li>
				        	<li><strong>554</strong></li>
				        </ul>
				    </div>
				    <!-- /general stats -->


				    <!-- Main navigation -->
			        <ul class="navigation widget">
			            <li><a href="index.html" title=""><i class="icon-home"></i>Dashboard</a></li>
			            <li><a href="#" title="" class="expand"><i class="icon-reorder"></i>Form elements<strong>3</strong></a>
			                <ul>
			                    <li><a href="forms.html" title="">Form components</a></li>
			                    <li><a href="wysiwyg.html" title="">WYSIWYG editor</a></li>
			                    <li><a href="form_wizards.html" title="">Wizards</a></li>
			                </ul>
			            </li>
			            <li class="active"><a href="#" title="" class="expand" id="current"><i class="icon-tasks"></i>Components<strong>4</strong></a>
			                <ul>
			                    <li><a href="components.html" title="">Content components</a></li>
			                    <li><a href="content_grid.html" title="" class="current">Content grid</a></li>
			                    <li><a href="blank.html" title="">Blank page</a></li>
			                </ul>
			            </li>
			            <li><a href="media.html" title=""><i class="icon-picture"></i>Media</a></li>
			            <li><a href="icons.html" title=""><i class="icon-th"></i>Icons</a></li>
			            <li><a href="charts.html" title=""><i class="icon-signal"></i>Charts &amp; graphs</a></li>
			            <li><a href="invoice.html" title=""><i class="icon-copy"></i>Invoice</a></li>
			            <li><a href="tables.html" title=""><i class="icon-table"></i>Tables</a></li>
			            <li><a href="#" title="" class="expand"><i class="icon-warning-sign"></i>Error pages<strong>6</strong></a>
			                <ul>
			                    <li><a href="403.html" title="">403 page</a></li>
			                    <li><a href="404.html" title="">404 page</a></li>
			                    <li><a href="405.html" title="">405 page</a></li>
			                    <li><a href="500.html" title="">500 page</a></li>
			                    <li><a href="503.html" title="">503 page</a></li>
			                    <li><a href="offline.html" title="">Offline page</a></li>
			                </ul>
			            </li>
			            <li><a href="typography.html" title=""><i class="icon-text-height"></i>Typography</a></li>
			            <li><a href="calendar.html" title=""><i class="icon-calendar"></i>Calendar</a></li>
			            <li><a href="file_management.html" title=""><i class="icon-cogs"></i>File management</a></li>
	                    <li><a href="#" title="" class="expand"><i class="icon-indent-right"></i>Menu levels<strong>3</strong></a>
			                <ul>
			                    <li><a href="#" title="">Link</a></li>
			                    <li><a href="#" title="" class="expand">Link with submenu</a>
					                <ul>
					                    <li><a href="#" title="">Lorem ipsum</a></li>
					                    <li><a href="#" title="">Dolor sit amet</a></li>
					                </ul>
			                    </li>
			                    <li><a href="#" title="">Link</a></li>
			                </ul>
	                    </li>
			            <li><a href="#" title="" class="expand"><i class="icon-sitemap"></i>Page layouts<strong>3</strong></a>
			                <ul>
			                    <li><a href="no_sidebar_tabs.html" title="">No sidebar tabs</a></li>
			                    <li><a href="no_action_tabs.html" title="">No action tabs</a></li>
			                    <li><a href="actions_on_top.html" title="">Action tabs on top</a></li>
			                    <li><a href="no_breadcrumbs.html" title="">No breadcrumbs line</a></li>
			                </ul>
			            </li>
			        </ul>
			        <!-- /main navigation -->

		        </div>

		        <div id="stuff">

                    <!-- 2 items tab panel -->
                    <ul class="tabs-nav two-items" style="border-top: 1px solid #d5d5d5; margin-top: 25px;">
						<li class="active"><a href="#" title="" class="active"><i class="icon-search"></i></a></li>
						<li><a href="#" title=""><i class="icon-cogs"></i></a></li>
                    </ul>
        
                    
                    <!-- 3 items tab panel -->
                    <ul class="tabs-nav three-items semi-widget" style="border-top: 1px solid #d5d5d5">
						<li class="active"><a href="#" title="" class="active"><i class="icon-search"></i></a></li>
						<li><a href="#" title=""><i class="icon-cogs"></i></a></li>
						<li><a href="#" title=""><i class="icon-link"></i></a></li>
                    </ul>
        
                    
                    <!-- 4 items tab panel -->
					<ul class="tabs-nav four-items semi-widget" style="border-top: 1px solid #d5d5d5">
						<li class="active"><a href="#" title="" class="active"><i class="icon-search"></i></a></li>
						<li><a href="#" title=""><i class="icon-cogs"></i></a></li>
						<li><a href="#" title=""><i class="icon-link"></i></a></li>
						<li><a href="#" title=""><i class="icon-signal"></i></a></li>
					</ul>     

                    
                    <!-- 5 items tab panel -->
                    <ul class="tabs-nav five-items semi-widget" style="border-top: 1px solid #d5d5d5">
						<li class="active"><a href="#" title="" class="active"><i class="icon-search"></i></a></li>
						<li><a href="#" title=""><i class="icon-cogs"></i></a></li>
						<li><a href="#" title=""><i class="icon-link"></i></a></li>
						<li><a href="#" title=""><i class="icon-signal"></i></a></li>
						<li><a href="#" title=""><i class="icon-signal"></i></a></li>
                    </ul>


                    <!-- Datepicker -->
		        	<div class="widget">
		        		<h6 class="widget-name"><i class="icon-calendar"></i>Datepicker</h6>
		                <div class="inlinepicker datepicker-liquid"></div>
		            </div>
		            <!-- /datepicker -->


		            <!-- Dates range -->
                    <ul class="widget dates-range">
                        <li><input type="text" id="fromDate" name="from" placeholder="From" /></li>
                        <li class="sep">-</li>
                        <li><input type="text" id="toDate" name="to" placeholder="To" /></li>
                    </ul>
                    <!-- /dates range -->


                    <!-- Color picker -->
                    <div class="widget input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb" id="cp3">
                        <input type="text" value="" readonly >
                        <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
                    </div>
                    <!-- /color picker -->


                    <!-- Time picker range -->
                    <ul class="widget dates-range">
                        <li><input id="timeformatExample1" type="text" placeholder="Start" /></li>
                        <li class="sep">-</li>
                        <li><input id="timeformatExample2" type="text" placeholder="End" /></li>
                    </ul>
                    <!-- /time picker range -->


                    <!-- Sliders -->
                    <div class="widget">
		                <h6 class="widget-name"><i class="icon-resize-horizontal"></i>Sliders</h6>

	                	<div class="slider-controls">
	                    	<label for="price-amount">Price range:</label>
							<input type="text" id="price-amount" />
						</div>
	                	<div id="range-slider"></div>

		                <div class="semi-widget">
	                    	<div class="slider-controls">
		                    	<label for="min-amount">Maximum range:</label>
								<input type="text" id="min-amount" />
							</div>
		                	<div id="slider-range-min"></div>
		                </div>

		                <div class="semi-widget">
	                    	<div class="slider-controls">
		                    	<label for="max-amount">Minimum range:</label>
								<input type="text" id="max-amount" />
							</div>
		                	<div id="slider-range-max"></div>
		                </div>
		            </div>
		            <!-- /sliders -->


			        <!-- Progress bars -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-align-left"></i>Progress bars</h6>
						<div class="progress">
							<div class="bar" style="width: 60%;"></div>
						</div>
						<div class="progress progress-danger progress-striped semi-widget">
							<div class="bar" style="width: 60%;"></div>
						</div>
						<div class="progress progress-info progress-striped active semi-widget">
							<div class="bar" style="width: 60%;"></div>
						</div>
						<div class="progress progress-success progress-slim semi-widget">
							<div class="bar" style="width: 60%;"></div>
						</div>

						<div class="progress semi-widget">
							<div class="bar bar-success" style="width: 35%;"></div>
							<div class="bar bar-warning" style="width: 20%;"></div>
							<div class="bar bar-danger" style="width: 10%;"></div>
						</div>
					</div>
					<!-- /progress bars -->

					
					<!-- Tags input -->
					<div class="widget">
						<h6 class="widget-name"><i class="icon-plus"></i>Tags input</h6>
						<input type="text" id="tags1" class="tags" value="these,are,sample,tags" />
					</div>
					<!-- /tags input -->


		        </div>

		        <div id="new">

		        	<!-- Action buttons -->
		        	<div class="widget">
		        		<h6 class="widget-name"><i class="icon-hand-up"></i>Action buttons</h6>
			        	<ul class="sidebar-buttons">
			        		<li><a href="" title="" class="red-square"><i class="icon-user"></i></a></li>
			        		<li><a href="" title="" class="blue-square"><i class="icon-comments"></i></a></li>
			        		<li><a href="" title="" class="green-square"><i class="icon-paste"></i></a></li>
			        		<li><a href="" title="" class="purple-square"><i class="icon-cogs"></i></a></li>
			        	</ul>

			        	<ul class="sidebar-buttons grey semi-widget">
			        		<li><a href="" title=""><i class="icon-user"></i></a></li>
			        		<li><a href="" title=""><i class="icon-comments"></i></a></li>
			        		<li><a href="" title=""><i class="icon-paste"></i></a></li>
			        		<li><a href="" title=""><i class="icon-cogs"></i></a></li>
			        	</ul>
			        </div>
			        <!-- /action buttons -->


			        <!-- Statistics -->
			        <div class="widget">
						<h6 class="widget-name"><i class="icon-signal"></i>Statistics</h6>
				    	<ul class="sidebar-stats well">
				    		<li>
				    			<div class="showcase">
				    				<span>Total visits</span>
				    				<h2>22.504</h2>
				    			</div>
				    			<div id="visits" class="chart">22,31,19,12,28,21,24,28,21,24</div>
				    		</li>
				    		<li>
				    			<div class="showcase">
				    				<span>Total clicks</span>
				    				<h2>32.098</h2>
				    			</div>
				    			<div id="clicks" class="chart">22,31,19,12,28,21,24,28,21,24</div>
				    		</li>
				    		<li>
				    			<div class="showcase">
				    				<span>Click rate</span>
				    				<h2>30.36</h2>
				    			</div>
				    			<div id="rate" class="chart">22,31,19,12,28,21,24,28,21,24</div>
				    		</li>
				    	</ul>
			        </div>
			        <!-- /statistics -->


			        <!-- OS stats widget -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-tasks"></i>OS statistics</h6>
				        <ul class="progress-statistics">
				            <li>
				                <strong>Windows PC</strong><strong class="pull-right">60%</strong>
								<div class="progress progress-success progress-slim"><div class="bar" style="width: 60%;"></div></div>
				            </li>
				            <li>
				                <strong>MacOS</strong><strong class="pull-right">70%</strong>
				                <div class="progress progress-danger progress-slim"><div class="bar" style="width: 70%;"></div></div>
				            </li>
				            <li>
				                <strong>iPad/iPhone</strong><strong class="pull-right">50%</strong>
				                <div class="progress progress-info progress-slim"><div class="bar" style="width: 50%;"></div></div>
				            </li>
				            <li>
				                <strong>Windows 8</strong><strong class="pull-right">20%</strong>
				                <div class="progress progress-warning progress-slim"><div class="bar" style="width: 20%;"></div></div>
				            </li>
				        </ul>
				    </div>
			        <!-- /OS stats widget -->


			        <!-- Social stats -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-twitter"></i>Social statistics</h6>
			        	<ul class="social-stats">
			        		<li>
			        			<a href="" title="" class="orange-square"><i class="icon-rss"></i></a>
			        			<div>
				        			<h4>1,286</h4>
				        			<span>total feed subscribers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="" title="" class="blue-square"><i class="icon-twitter"></i></a>
			        			<div>
				        			<h4>12,683</h4>
				        			<span>total twitter followers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
			        			<div>
				        			<h4>530,893</h4>
				        			<span>total facebook likes</span>
				        		</div>
			        		</li>
			        	</ul>
			        </div>
			        <!-- /social stats -->


			        <!-- Categories -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-list"></i>Categories</h6>
				        <ul class="plus-list categories">
				        	<li>
				        		<a href="#" title="">Company documents</a>
				        		<strong>1232</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Media entries</a>
				        		<strong>7638</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Blog posts</a>
				        		<strong>221</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Job positions</a>
				        		<strong>49</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Team members</a>
				        		<strong>80</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Projects</a>
				        		<strong>43</strong>
				        	</li>
				        </ul>
				    </div>
				    <!-- /categories -->


				    <!-- Gallery thumbs -->
				    <div class="widget">
				    	<h6 class="widget-name"><i class="icon-picture"></i>Gallery thumbs</h6>
				    	<div class="row-fluid thumbs">
					    	<div class="span6">
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    	</div>
					    	<div class="span6">
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="http://placehold.it/580x380" alt="" /></a>
					    	</div>
					    </div>
				    </div>
				    <!-- /gallery thumbs -->


		            <!-- Contact list -->
		            <div class="widget">
		            	<h6 class="widget-name"><i class="icon-user"></i>Contacts</h6>
			            <ul class="user-list">
			                <li>
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>Eugene Kopyov <span>(5)</span></strong>
			                            <i>web &amp; ui designer</i>
			                        </span>
			                        <span class="status_away"></span>
			                    </a>
			                </li>
			                <li class="active">
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>Lucy Wilkinson <span>(12)</span></strong>
			                            <i>Team leader</i>
			                        </span>
			                        <span class="status_off"></span>
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>John Dow</strong>
			                            <i>PHP developer</i>
			                        </span>
			                        <span class="status_available"></span>
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>The Incredible</strong>
			                            <i>web &amp; ui designer</i>
			                        </span>
			                        <span class="status_available"></span>
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>The wazzup guy</strong>
			                            <i>web &amp; ui designer</i>
			                        </span>
			                        <span class="status_available"></span>
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <img src="http://placehold.it/37x37" alt="" />
			                        <span class="contact-name">
			                            <strong>Viktor Fedorovich<span class="status_available"></span></strong>
			                            <i>web &amp; ui designer</i>
			                        </span>
			                        
			                    </a>
			                </li>
			            </ul>
			            <div class="more">
			            	<img src="img/elements/loaders/7s.gif" alt="" />
				            <a href="#" title="">Load more</a>
				        </div>
			        </div>
		            <!-- /contact list -->


		            <!-- Action buttons -->
	                <div class="widget">
	                	<h6 class="widget-name"><i class="icon-hand-up"></i>Action buttons</h6>
	                	<button class="btn btn-block btn-danger">Action button</button>
	                	<button class="btn btn-block btn-info">Action button</button>
	                	<button class="btn btn-block btn-success">Action button</button>
	                </div>
	                <!-- /action buttons -->


	                <!-- Alerts -->
	                <div class="widget">
	                	<h6 class="widget-name"><i class="icon-warning-sign"></i>Alerts</h6>
	                    <div class="alert">
	                        <button type="button" class="close" data-dismiss="alert">×</button>
	                        Warning alert
	                    </div>
	                    <div class="alert alert-error">
	                        <button type="button" class="close" data-dismiss="alert">×</button>
	                        Error alert
	                    </div>
	                    <div class="alert alert-success">
	                        <button type="button" class="close" data-dismiss="alert">×</button>
	                        Success alert
	                    </div>
	                    <div class="alert alert-info">
	                        <button type="button" class="close" data-dismiss="alert">×</button>
	                        Good to know! Info alert
	                    </div>
	                </div>
	                <!-- /alerts -->
					

		            <!-- Form elements -->
		            <form action="#" class="widget">
		            	<h6 class="widget-name"><i class="icon-indent-right"></i>Form elements</h6>
		                <input type="text" value="" placeholder="Your name" />
		                <input type="password" value="" placeholder="Your password" />
		                <input type="file" class="styled" />
		                <select name="select2" class="styled" >
		                    <option value="opt1">Usual select box</option>
		                    <option value="opt2">Option 2</option>
		                    <option value="opt3">Option 3</option>
		                    <option value="opt4">Option 4</option>
		                    <option value="opt5">Option 5</option>
		                    <option value="opt6">Option 6</option>
		                    <option value="opt7">Option 7</option>
		                    <option value="opt8">Option 8</option>
		                </select>
		                <select data-placeholder="Choose a Country..." class="select" tabindex="2">
		                    <option value=""></option> 
		                    <option value="Cambodia">Cambodia</option> 
		                    <option value="Cameroon">Cameroon</option> 
		                    <option value="Canada">Canada</option> 
		                    <option value="Cape Verde">Cape Verde</option> 
		                </select>
		                <div class="sidebar-checks">
		                    <label class="checkbox"><input type="checkbox" name="checkbox1" class="styled" value="" checked="checked" />Checkbox checked</label>
		                    <label class="radio"><input type="radio" name="radio" class="styled" value="" />Unchecked radio</label>
		                    <label class="radio"><input type="radio" name="radio" class="styled" value="" checked="checked" />Checked radio</label>
		                </div>
		                <textarea cols="4" rows="4" placeholder="Your message"></textarea>
		                <div class="form-actions">
		                    <input type="submit" value="Submit form" class="btn btn-info pull-left" />
		                    <input type="reset" value="Reset form" class="btn btn-danger pull-right" />
		                </div>
		            </form>
		            <!-- /form elements -->


		            <!-- Accordion -->
                    <div class="accordion widget" id="sidebar-accordion">
                    	<h6 class="widget-name"><i class="icon-chevron-up"></i>Accordion</h6>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#sidebar-accordion" href="#collapseOne"><i class="icon-ok"></i>Collapsible Group Item #1</a>
                            </div>
                            <div id="collapseOne" class="accordion-body collapse in">
                                <div class="accordion-inner">Anim pariatur cliche...</div>
                            </div>
                        </div>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#sidebar-accordion" href="#collapseTwo"><i class="icon-reorder"></i>Collapsible Group Item #2</a>
                            </div>
                            <div id="collapseTwo" class="accordion-body collapse">
                                <div class="accordion-inner">Anim pariatur cliche...</div>
                            </div>
                        </div>
                    </div>
                    <!-- /accordion -->


                    <!-- Toggle -->
                    <div class="accordion widget" id="sidebar-toggle">
                    	<h6 class="widget-name"><i class="icon-chevron-down"></i>Toggle group</h6>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a class="accordion-toggle" data-toggle="collapse" data-target="#column1"><i class="fam-feed"></i>Collapsible Group Item #1</a>
                            </div>
                            <div id="column1" class="accordion-body collapse in">
                                <div class="accordion-inner">Anim pariatur cliche...</div>
                            </div>
                        </div>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a class="accordion-toggle" data-toggle="collapse" data-target="#column2"><i class="fam-arrow-out"></i>Collapsible Group Item #2</a>
                            </div>
                            <div id="column2" class="accordion-body collapse">
                                <div class="accordion-inner">Anim pariatur cliche...</div>
                            </div>
                        </div>
                    </div>
                    <!-- /toggle -->

		        </div>

		    </div>
		</div>
		<!-- /sidebar -->


		<!-- Content -->
		<div id="content">

		    <!-- Content wrapper -->
		    <div class="wrapper">

			    <!-- Breadcrumbs line -->
			    <div class="crumbs">
		            <ul id="breadcrumbs" class="breadcrumb"> 
		                <li><a href="index.html">Dashboard</a></li>
		                <li><a href="components.html">Components</a></li>
		                <li class="active"><a href="content_grid.html" title="">Content grid</a></li>
		            </ul>
			        
		            <ul class="alt-buttons">
		                <li><a href="#" title=""><i class="icon-signal"></i><span>Stats</span></a></li>
		                <li><a href="#" title=""><i class="icon-comments"></i><span>Messages</span></a></li>
		                <li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="icon-tasks"></i><span>Tasks</span> <strong>(+16)</strong></a>
		                	<ul class="dropdown-menu pull-right">
		                        <li><a href="#" title=""><i class="icon-plus"></i>Add new task</a></li>
		                        <li><a href="#" title=""><i class="icon-reorder"></i>Statement</a></li>
		                        <li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
		                	</ul>
		                </li>
		            </ul>
			    </div>
			    <!-- /breadcrumbs line -->

			    <!-- Page header -->
			    <div class="page-header">
			    	<div class="page-title">
				    	<h5>Content grid</h5>
				    	<span>12 columns responsive grid</span>
			    	</div>

			    	<ul class="page-stats">
			    		<li>
			    			<div class="showcase">
			    				<span>New visits</span>
			    				<h2>22.504</h2>
			    			</div>
			    			<div id="total-visits" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    		<li>
			    			<div class="showcase">
			    				<span>My balance</span>
			    				<h2>$16.290</h2>
			    			</div>
			    			<div id="balance" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    	</ul>
			    </div>
			    <!-- /page header -->

			    <!-- Action tabs -->
			    <div class="actions-wrapper">
				    <div class="actions">

				    	<div id="user-stats">
					        <ul class="round-buttons">
					            <li><div class="depth"><a href="" title="Add new post" class="tip"><i class="icon-plus"></i></a></div></li>
					            <li><div class="depth"><a href="" title="View statement" class="tip"><i class="icon-signal"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Media posts" class="tip"><i class="icon-reorder"></i></a></div></li>
					            <li><div class="depth"><a href="" title="RSS feed" class="tip"><i class="icon-rss"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Create new task" class="tip"><i class="icon-tasks"></i></a></div></li>
					            <li><div class="depth"><a href="" title="Layout settings" class="tip"><i class="icon-cogs"></i></a></div></li>
					        </ul>
				    	</div>

				    	<div id="quick-actions">
				    		<ul class="statistics">
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="blue-square"><i class="icon-plus"></i></a>
					    				<strong>12,476</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 60%;"></div></div>
									<span>User registrations</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="red-square"><i class="icon-hand-up"></i></a>
					    				<strong>621,873</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 20%;"></div></div>
									<span>Total clicks</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="purple-square"><i class="icon-shopping-cart"></i></a>
					    				<strong>562</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 90%;"></div></div>
									<span>New orders</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="green-square"><i class="icon-ok"></i></a>
					    				<strong>$45,360</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 70%;"></div></div>
									<span>General balance</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="sea-square"><i class="icon-group"></i></a>
					    				<strong>562K+</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 50%;"></div></div>
									<span>Total users</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
					    				<strong>36,290</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 93%;"></div></div>
									<span>Facebook fans</span>
				    			</li>
				    		</ul>
				    	</div>

				    	<div id="map">
				    		<div id="google-map"></div>
				    	</div>

				    	<ul class="action-tabs">
				    		<li><a href="#user-stats" title="">Quick actions</a></li>
				    		<li><a href="#quick-actions" title="">Website statistics</a></li>
				    		<li><a href="#map" title="" id="map-link">Google map</a></li>
				    	</ul>
				    </div>
				</div>
			    <!-- /action tabs -->

		    	<!-- Search widget -->
		    	<form class="search widget" action="#">
		    		<div class="autocomplete-append">
			    		<ul class="search-options">
			    			<li><a href="#" title="Go to search page" class="go-option tip"></a></li>
			    			<li><a href="#" title="Advanced search" class="advanced-option tip"></a></li>
			    			<li><a href="#" title="Settings" class="settings-option tip"></a></li>
			    		</ul>
			    		<input type="text" placeholder="search website..." id="autocomplete" />
			    		<input type="submit" class="btn btn-info" value="Search" />
			    	</div>
		    	</form>
		    	<!-- /search widget -->


		    	<h5 class="widget-name"><i class="icon-search"></i>12 columns grid</h5>

            	<!-- Span 12 -->
				<div class="widget">
                    <div class="navbar">
                    	<div class="navbar-inner"><h6>Span12</h6></div>
                    </div>
                    <div class="well body"><code>&lt;div class="span12">&lt;/div></code> to force 100% width. By default every block has 100% width.</div>
                </div>
                <!-- /span 12 -->
                
                <!-- Span 6 -->
            	<div class="row-fluid">
                    <div class="span6">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span6</h6></div></div>
                            <div class="well body"><code>&lt;div class="span6">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span6">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span6</h6></div></div>
                            <div class="well body"><code>&lt;div class="span6">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /span6 -->
				
                <!-- Span 4 -->
            	<div class="row-fluid">
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /span 4 -->
                
                <!-- Span 3 -->
            	<div class="row-fluid">
                    <div class="span3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /span 3 -->
                
                <!-- Span 4 | Span 8 -->
            	<div class="row-fluid">
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span8">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span8</h6></div></div>
                            <div class="well body"><code>&lt;div class="span8">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /span 4 | span 8 -->
                
                <!-- Span 8 | Span 4 -->
            	<div class="row-fluid">
                    <div class="span8">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span8</h6></div></div>
                            <div class="well body"><code>&lt;div class="span8">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /span 8 | span 4 -->
                

                <h5 class="widget-name"><i class="icon-search"></i>Fluid offsetting</h5>

                <!-- Offset 4 -->
            	<div class="row-fluid">
                    <div class="span4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span4 offset4">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span4 offset</h6></div></div>
                            <div class="well body"><code>&lt;div class="span4 offset4">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /offset 4 -->
                
                <!-- Offset 3 -->
            	<div class="row-fluid">
                    <div class="span3 offset3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3 offset</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3 offset3">&lt;/div></code></div>
                        </div>
                    </div>
                    
                    <div class="span3 offset3">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span3 offset</h6></div></div>
                            <div class="well body"><code>&lt;div class="span3 offset3">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /offset 3 -->
                
                <!-- Offset 6 -->
            	<div class="row-fluid">
                    <div class="span6 offset6">
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Span6 offset</h6></div></div>
                            <div class="well body"><code>&lt;div class="span6 offset6">&lt;/div></code></div>
                        </div>
                    </div>
                </div>
                <!-- /offset 3 -->
                

                <h5 class="widget-name"><i class="icon-search"></i>Nested grid</h5>
                
                <!-- Nesting grid -->
				<div class="widget">
                	<div class="navbar"><div class="navbar-inner"><h6>Nested grid</h6></div></div>
                	<div class="well body">
                    	<div class="row-fluid">
                        	<div class="span6">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span6</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span6">&lt;/div></code></div>
	                            </div>
                            </div>
                            
                        	<div class="span6">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span6</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span6">&lt;/div></code></div>
	                            </div>
                            </div>
                        </div>

                    	<div class="row-fluid">
                        	<div class="span4">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
	                            </div>
                            </div>
                            
                        	<div class="span8">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span8</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span8">&lt;/div></code></div>
	                            </div>
                            </div>
                        </div>

                    	<div class="row-fluid">
                        	<div class="span8">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span8</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span8">&lt;/div></code></div>
	                            </div>
                            </div>
                            
                        	<div class="span4">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
	                            </div>
                            </div>
                        </div>

                    	<div class="row-fluid">
                        	<div class="span4">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
	                            </div>
                            </div>
                            
                        	<div class="span4">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
	                            </div>
                            </div>

                        	<div class="span4">
                        		<div class="widget">
	                            	<div class="navbar"><div class="navbar-inner"><h6>Span4</h6></div></div>
	                                <div class="well body"><code>&lt;div class="span4">&lt;/div></code></div>
	                            </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /nesting grid -->

		    </div>
		    <!-- /content wrapper -->

		</div>
		<!-- content -->

	</div>
	<!-- /content container -->


	<!-- Footer -->
	<div id="footer">
		<div class="copyrights">Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
		<ul class="footer-links">
			<li><a href="" title=""><i class="icon-cogs"></i>Contact admin</a></li>
			<li><a href="" title=""><i class="icon-screenshot"></i>Report bug</a></li>
		</ul>
	</div>
	<!-- /footer -->

<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
